<div id="appHome">
    <div class="row">
        <div class="col-md-12">
            <div class="row" style="display: none">
                <div class="col-md-4">
                    <h5>系统列表</h5>
                    <ul id="itemTree1" class="tree" data-ride="tree">
                        <!--用于展示当前已经添加的元器件-->
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5>电路列表</h5>
                    <ul id="itemTree2" class="tree" data-ride="tree">
                        <!--用于展示当前已经添加的元器件-->
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5>元器件列表</h5>
                    <ul id="itemTree3" class="tree" data-ride="tree">
                        <!--用于展示当前已经添加的元器件-->
                    </ul>
                </div>
            </div>
            <div class="row" id="loadingIcon" style="">
                <div data-loading="正在加载故障树..." class="load-indicator loading" style="width: 100px; height: 100px; background: #fff;float: none;
                    display: block;
                    margin-left: auto;
                    margin-right: auto;"></div>
            </div>
            <div class="row">
                <div id="treeSystem" class="treemap"></div>
                <!--




                    
                    组织图节点
                
                
                
                
                
                
                -->
            </div>
        </div>

    </div>
</div>

<!--脚本位置-->
<script src="js/pointer.js"></script>
<script>
    function makeList(jsonObj) {
        //将传过来的元器件obj转换成为列表的html
        console.log(jsonObj);
        result = ""
        result += '<div class="list list-condensed">\
                <header>\
                    <h3>故障列表<small></small></h3>\
                </header><div class="items items-hover">'
        items = jsonObj
        for (var i in items) {
            console.log(items[i])
            result += '<div class="item">\
                    <div class="item-heading">\
                        <h4><a href="###">'+ items[i]["text"] + "   作用：" + items[i].tooltip + '</a></h4>\
                    </div>\
                    <div class="item-content">\
                            <div class="list list-condensed">\
                                <div class="items items-hover">'

            for (var j in items[i].children) {
                result += '<div class="item">\
                                                    <div class="item-heading">\
                                                        <h4><a href="###">故障名称：'+ items[i].children[j].text + '</a></h4>\
                                                    </div>\
                                                    <div class="item-content">\
                                                        <div class="text">故障原因：'+ items[i].children[j].tooltip + '</div>\
                                                    </div>\
                                                </div>'
            }

            result += '</div>\
                            </div>\
                    </div>\
                    </div>'
        }


        result += '</div></div>'
        return result
    }
    function log(v) {
        console.log(v)
    }
    function showItem(i, j, k) {
        /*
            i：系统
            j：电路
            k：故障
        */
        console.log(i, j, k)

        layer.open({
            type: 1 //此处以iframe举例
            , title: vm_home.$data.EaTree[i].children[j].children[k]["text"] + " 元件故障树"
            , area: ['390px', '500px']
            , shade: 0
            , maxmin: true
            , offset: [ //为了演示，随机坐标
                Math.random() * ($(window).height() - 300)
                , Math.random() * ($(window).width() - 500)
            ]
            , content: makeList(vm_home.$data.EaTree[i].children[j].children[k]["items"])
            , btn: ['关闭'] //只是为了演示
            , btn2: function () {
                layer.closeAll();
            }

            , zIndex: layer.zIndex //重点1
            , success: function (layero) {
                //console.log("打开新窗口",layero)
                layer.setTop(layero); //重点2
            }
        });
    }
    var system = []
    var vm_home = new Vue({
        el: "#appHome",
        data: {
            selected: "",
            pstrFunction: "", //元器件的功能
            title: "",//元器件的名字
            pstr1_1: "", //第一个plane的故障原因和影响
            pstr1_2: "",
            pstr2_1: "", //第2个plane的故障原因和影响
            pstr2_2: "",
            pstr3_1: "", //第3个plane的故障原因和影响
            pstr3_2: "",
            items: [], //储存元器件的总表
            system: [],//系统级别
            EaTree: [],//故障树
            TreeStr: "",//故障树的纯str
        },
        methods: {
            renderTree: function () {

                if (typeof (w) == "undefined") {
                    w = new Worker("js/cal.js")//在线程中计算防止页面卡死
                    w.postMessage("system") //首先返回系统的树形图
                    w.onmessage = function (event) {
                        /*
                            后台的操作：
                            1：在html分析并简历树形结构
                            2：从元器件反推失效模式
                        */

                        //if (event.data[0] == '[') {//如果后台传送的是json字符
                        var obj = JSON.parse(event.data)
                        vm_home.$data.EaTree = obj
                        vm_home.$data.TreeStr = event.data
                       // log("更新system树")
                        $('#treeSystem').treemap({
                            data: [
                                {
                                    text: '氧气监控器系统',
                                    tooltip: "系统元件目录表",
                                    children: vm_home.$data.EaTree,
                                    listenNodeResize: false,
                                    cableWdth: 0
                                }

                            ]
                        }
                        )
                        $("#loadingIcon").slideUp('slow')
                        /*--------------------------------------------------------------------------------------------------------------------*/
                        tempSystem = JSON.parse(vm_home.$data.TreeStr)
                       
                        _System={}    //xx板，xx板
                        _Item={}  //元器件字典，其中也是储存了每个元器件的地址,弄成全局的原因是考虑到如果有跨系统的故障

                        //第一步：添加所有模块成为字典，并且字典的值是其地址
                        for(var i =0;i<1;i++){
                            _System[tempSystem[i].text]=newPoint() //给 电源板/控制板。。分配内存
                            obj=eval(_System[tempSystem[i].text]) //获得内存对象
                            obj.text=tempSystem[i].text
                            obj.desc=tempSystem[i].tooltip          //给xx板添加  名称和说明 
                            obj.circuit=[]   //用于存放电路
                            obj._badMood={}   //故障模式，整个系统的故障模式存放于此，目的维在电路层面添加进去，迭代第二个功能电路EA的表
                            obj._circuit={}   //功能电路，用于输出第二个报表,这里存放的是地址
                            obj._badMood2={}  //元器件往上的错误
                            obj._item=[]      //元器件的列表，而不是字典
                            for(var j in tempSystem[i].bad){        //增加他的故障模式
                                obj._badMood[tempSystem[i].bad[j].text]=addChild(obj,{  //在电源板这层暂时不往上迭代
                                    text:tempSystem[i].bad[j].text,         //将故障模式全部存入字典中
                                    desc:tempSystem[i].bad[j].bad_result
                                })
                            }

                            //添加功能电路EA的部分
                            for(var j in tempSystem[i].children){
                                obj._circuit[tempSystem[i].children[j].text]=addChild(obj.circuit,{
                                    text:tempSystem[i].children[j].text,
                                    desc:tempSystem[i].children[j].tooltip
                                })
                                var obj2=eval(obj._circuit[tempSystem[i].children[j].text]) //获取实例.
                                //log(obj2)
                                for(var k in tempSystem[i].children[j].children){ //获取电路的故障模式
                                    var obj3=tempSystem[i].children[j].children[k]
                                    //log((obj._circuit[]))
                                   // log(obj3.text)
                                    var obj4=addChild(obj2,{
                                        text:obj3.text,
                                        parent:obj._badMood[obj3.text]
                                    }) //将已经申请的地址接入
                                    //这个循环 实现的功能是，在功能电路EA表中，将故障模式添加到产品下面
                                    findID=function(str){
                                        for(var l in tempSystem[i].children[j].children){
                                            if (tempSystem[i].children[j].children[l].text==str){
                                                return l
                                            }
                                            
                                        }
                                        return -1
                                    }
                                    //log(obj4)
                                    obj._badMood2[obj4.text]=obj4 //添加元器件级别的上一层影响 
                                    //接下来是添加上一层影响
                                    addPChild(
                                        (obj._badMood[tempSystem[i].children[j].children[ findID( obj3.text ) ].bad_result]), //这是上一层影响
                                        obj4
                                    )
                                }
                            }
                            
                            //接下来将元器件添加到故障模式中，成为children
                            for(var j in tempSystem[i].items){
                                item=tempSystem[i].items[j] //item为每一个元器件的实例
                                var vname=eval(newPoint())//给每个元件申请一个内存
                                //log(item.text)
                                _Item[item.text]=(vname) //将元器件存放进入全局的变量的字典中
                                obj._item.push(vname)   //将元器件填入系统的list中，方便生成元器件EA
                                vname.text=item.title
                                vname.desc=item.func
                                vname.children=[]
                                //接下来将元器件的每一个失效模式存放进入其children
                                for(var k in item.bad){
                                    baditem=item.bad[k] //每一个元器件失效模式的实例
                                    _p=eval(newPoint())   //同样是 给每一个失效模式申请内存
                                    _p.text=baditem.bad_type  //填入元器件的额故障名称和故障原因
                                    _p.reason=baditem.bad_reason
                                    _p.fatherItem=vname //将每个错误的父对象指回元器件
                                    _p.desc=baditem.bad_desc
                                    //将元器件的高一层次影响向上填充到故障模式的children
                                    addPChild(
                                        obj._badMood2[baditem.bad_result] ,  
                                        _p
                                    )
                                    vname.children.push(  //元器件到其故障列表是单向链表 
                                        _p
                                    )
                                }
                               // log(vname)
                            }
                           // log(obj)
                        }

                        log(eval(_System["电源板"]))
                        

                        listSystem=eval(newPoint()) //系统头指针


                        /*显示结果*/
                       // log(listSystem)
                    };

                    
                    
                }






            },



        }
    })
    vm_home.renderTree()
    console.log(vm_home.$data.EaTree)

</script>